<template>
  <a-modal
    v-model:visible="dislog.Classification"
    :body-style="bodystyle"
    :width="710"
    style="text-align: center"
    title="接口批量分类"
    cancel-text="取消"
    ok-text="确定"
    @cancel="cancel"
    @ok="Classification"
  >
    <div class="api_classifiy">
      <h3>接口分类</h3>
      <a-tree-select
        v-model:value="directoryCode"
        show-search
        style="width: 70%"
        :field-names="fieldNames"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择"
        allow-clear
        tree-default-expand-all
        :tree-data="dataTree"
      >
        <template #title="{ directoryName }">
          {{ directoryName }}
        </template>
      </a-tree-select>
    </div>
    <a-table
      :columns="columns"
      :data-source="selectStopwatch"
      :row-selection="{ selectedRowKeys: selectApiCode, onChange: selectChange, preserveSelectedRowKeys: true }"
      :row-key="(record:any) => record.apiCode"
      :pagination="false"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'apiName'">
          {{ text }}
        </template>
      </template>
    </a-table>
  </a-modal>
</template>

<script lang="ts" setup>
  import { changeInterfaceBatchClassify } from '@/api/test';
  import { getInterfaceDetailsHooks } from '@/hooks/InterfaceManagementHooks/getInterfaceDetailsHooks';
  import { selectChangeHooks } from '@/hooks/onSelectChangeHooks';
  import { TreeHooks } from '@/hooks/TreeStructure/TreeStructureHooks';
  import { batchClassify, Key } from '@/pages/CodeTables/specification';
  //   表头
  const columns = [
    {
      title: '接口名称',
      dataIndex: 'apiName',
      align: 'center',
    },
  ];
  //引入hooks
  const { dislog } = getInterfaceDetailsHooks();
  const { selectStopwatch, selectedRowKeys } = selectChangeHooks();
  const { dataTree } = TreeHooks();
  // 替换 treeNode 中 title,key,children 字段为 dataTree 中对应的字段
  const fieldNames = {
    children: 'children',
    title: 'directoryName',
    value: 'directoryCode',
  };
  // 控制详情弹窗高度
  const bodystyle = {
    height: '500px',
    overflow: 'hidden',
    overflowY: 'scroll',
  };

  //   选中的目录编号
  const directoryCode = ref<string>('');
  // 第几行是否被选择
  const selectApiCode = computed(() => {
    return selectedRowKeys.value;
  });
  // const selectApiCode = ref<Key[]>();
  // selectApiCode.value = selectCode.value;
  // 保存选择后的数据---需要向后端传递的数据
  const selectApiName = ref<Object[]>([]);
  // 勾选后将勾选数据插入数组
  const selectChange = (e: Key[], record: Key[]) => {
    console.log(selectApiCode.value);
    selectedRowKeys.value = e;
    selectApiName.value = record;
  };
  // 批量分类确定
  const Classification = async () => {
    const deliverInfo: batchClassify = {
      apiCodeList: selectApiCode.value as [string],
      directoryCode: directoryCode.value,
    };
    console.log(deliverInfo);

    await changeInterfaceBatchClassify(deliverInfo);
    dislog.Classification = false;
    selectedRowKeys.value = [];
    selectStopwatch.value = [];
    directoryCode.value = '';
  };
  // 批量分类取消
  const cancel = () => {
    dislog.Classification = false;
    selectedRowKeys.value = [];
    selectStopwatch.value = [];
    directoryCode.value = '';
  };
</script>
<style lang="less" scoped>
  .api_classifiy {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 20px;
  }
</style>
